import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const CollapseDemoView = defineView({
  controller: class {
    static $inject = ["$scope"];

    /**
     * @param {ng.IScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
      this.isNavCollapsed = true;
      this.isCollapsed = false;
      this.isCollapsedHorizontal = false;
    }

    handleClick() {
      console.log("CollapseDemoCtrl", this.$scope);
    }
  },
  controllerAs: "$ctrl",
  template: /* HTML */ html`
    <div>
      <p>
        Resize window to less than 768 pixels to display mobile menu toggle
        button.
      </p>
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle"
            ng-click="$ctrl.isNavCollapsed = !$ctrl.isNavCollapsed"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">A menu</a>
        </div>
        <div
          class="collapse navbar-collapse"
          uib-collapse="$ctrl.isNavCollapsed"
        >
          <ul class="nav navbar-nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>
        </div>
      </nav>
      <hr />
      <button
        type="button"
        class="btn btn-default"
        ng-click="$ctrl.isCollapsed = !$ctrl.isCollapsed"
      >
        Toggle collapse Vertically
      </button>
      <hr />
      <div uib-collapse="$ctrl.isCollapsed">
        <div class="well well-lg">Some content</div>
      </div>

      <button
        type="button"
        class="btn btn-default"
        ng-click="$ctrl.isCollapsedHorizontal = !$ctrl.isCollapsedHorizontal"
      >
        Toggle collapse Horizontally
      </button>
      <hr />
      <div
        class="horizontal-collapse"
        uib-collapse="$ctrl.isCollapsedHorizontal"
        horizontal
      >
        <div class="well well-lg">Some content</div>
      </div>
    </div>
    ${DebugButtonHTML("$ctrl")}
  `,
});

export default CollapseDemoView;
